// 按需导入 API 接口
import { getUserInfoAPI } from '@/api/user.js'

// 这个是用户相关的 vuex 模块
export default {
  // 开启命名空间，防止模块之间成员冲突
  namespaced: true,
  // 模块内部的 state 必须是“函数”，return 一个数据对象
  state() {
    return {
      // 登录成功之后的 token
      token: '',
      // 用户的基本信息对象
      info: {}
    }
  },
  // 函数
  mutations: {
    // 建议遵守如下的命名规范：
    // 要给谁赋值，就把函数名，命名为 updateXXX
    updateToken(state, token) {
      state.token = token
    },
    // 更新 state 中 info 的数据
    // 形参中的 obj 就是 Ajax 请求回来的用户信息对象
    updateInfo(state, obj) {
      state.info = obj
    }
  },
  // 异步操作
  actions: {
    // 获取用户基本信息的 actions 函数
    // 强调：actions 函数的第一个形参，永远都是 ctx
    // 但是 ctx 不是 store，而是和 store 具有相同的属性和方法
    async initUserInfo(ctx) {
      // 调用接口，获取用户的信息
      const result = await getUserInfoAPI()
      // 思考：在 actions 中如何调用 mutations 函数呢？
      ctx.commit('updateInfo', result.data)
    }
  }
}
